<!--
 * @Descripttion: 
 * @version: 
 * @Author: 周志国
 * @Date: 2022-03-16 10:50:34
 * @LastEditors: 周志国
 * @LastEditTime: 2022-03-17 16:36:47
 * @changeLog: 
 * @FilePath: /anov-next/src/assets/js/app/cmlpanel/components/part/auxiliaryOpt.vue
-->
<template>
  <div class="cml-module">
    <ul class="cml-module-list drag-ul">
      <li class="cml-module-item">
        <p class="cml-module-item-t">{{ lockAspectRatioText }}:</p>
        <p
          class="cml-module-item-o picker-color"
          @click="pickColor"
          :style="`background-color:${auxiliaryColor}`"
          ref="pickerColor"
        ></p>
        <chrome
          :value="auxiliaryColor"
          @input="updateValue"
          v-if="isChrome"
          class="chrome-picker"
          ref="chromePicker"
        >
        </chrome>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { Select } from 'ant-design-vue'
import CmlModule from '@/assets/js/app/cmlpanel/components/cml-module'
import { Chrome } from 'vue-color'
import { partServer } from 'anov-core'
export default {
  name: 'AuxiliaryOpt',
  components: {
    ASelect: Select,
    CmlModule,
    Chrome
  },
  data() {
    return {
      isChrome: false
    }
  },
  computed: {
    ...mapState('part', ['auxiliaryColor']),
    lockAspectRatioText() {
      return this.$t('cmlpanel.auxiliaryColor')
    }
  },
  watch: {},
  created() {},
  mounted() {
    let self = this
    document.addEventListener('click', self.closePickColor, false)
  },
  beforeDestroy() {
    let self = this
    document.removeEventListener('click', self.closePickColor)
  },
  methods: {
    updateValue(val) {
      let rgba = val.rgba
      let key = 'auxiliaryColor'
      let value = `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`
      partServer.setDragOpt({ key, val: value })
    },
    pickColor() {
      this.isChrome = !this.isChrome
    },
    closePickColor(e) {
      e.stopPropagation() || e.preventDefault()
      let elem = e.srcElement || e.target
      let pick = this.$refs.pickerColor
      let dom = this.$refs.chromePicker?.$el
      if (!dom || pick == elem) return
      if (!dom.contains(elem)) this.isChrome = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/sys-style/panel-var.scss';
@import '@/assets/css/sys-style/panel-mixin.scss';
.cml-module .drag-ul {
  background-color: transparent;
  .cml-module-item {
    padding-left: 20px;
    .picker-color {
      width: 50px;
      height: 20px;
      cursor: pointer;
      border: 1px solid #cafff733;
    }
    .chrome-picker {
      position: absolute;
      top: 140px;
      right: 5px;
      ::v-deep {
        .vc-chrome-body {
          padding: 16px 16px 12px;
          background-color: rgba(0, 0, 0, 0.85);
        }
        .vc-chrome-fields .vc-input__input {
          font-size: 12px;
          color: rgb(245 245 245);
          width: 100%;
          border-radius: 2px;
          border: none;
          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.28);
          height: 24px;
          text-align: center;
          background: rgba(0, 0, 0, 0);
        }
        svg {
          width: 20px !important;
          height: 20px !important;
        }
        path {
          fill: rgb(245 245 245) !important;
        }
        .vc-chrome-toggle-icon-highlight {
          position: absolute;
          width: 18px;
          height: 24px;
          background: rgb(238 238 238 / 20%);
          border-radius: 2px;
          top: 10px;
          left: 17px;
        }
      }
    }
  }
}
</style>
